Comprehensive Coding Blog

Server-Sent Events (SSE) is a mechanism that allows a server to push real-time updates to a client over a single HTTP connection. SSE is based on the HTTP protocol and allows the server to send automatic updates to the browser without the client needing to repeatedly request new data (unlike polling).

How SSE Works

The client sends a request to the server using a persistent HTTP connection.
The server keeps the connection open and continuously sends updates as new data becomes available.
The client listens for events and updates the UI accordingly.

Example

Server Code (Node.js)

javascript
const express = require('express');
const app = express();

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // Send an event every second
  const interval = setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: new Date().toISOString() })}\n\n`);
  }, 1000);

  // Close connection when the client disconnects
  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

app.listen(3000, () => console.log('Server started on http://localhost:3000'));

Client Code (HTML + JavaScript)

html
<!DOCTYPE html>
<html>
  <body>
    <h1>Server-Sent Events Example</h1>
    <div id="data"></div>

    <script>
      const eventSource = new EventSource('http://localhost:3000/events');

      eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        document.getElementById('data').innerText = `Time: ${data.time}`;
      };

      eventSource.onerror = (error) => {
        console.error('EventSource failed:', error);
        eventSource.close();
      };
    </script>
  </body>
</html>

Explanation

The client opens a connection using EventSource.
The server sends updates using res.write() in the format:
```
kotlin
data: <data>\n\n
```
The browser receives updates and triggers the onmessage handler.
If the connection is lost, the browser will automatically try to reconnect unless explicitly closed using eventSource.close().

Advantages of SSE

✅ Simple to implement since it uses standard HTTP.
✅ Efficient compared to long polling since only one connection is maintained.
✅ Automatic reconnection on connection loss.
✅ Can send custom event types.

Limitations

❌ Only supports unidirectional communication (server → client).
❌ Works only over HTTP/HTTPS (not WebSockets).
❌ Limited by the maximum number of concurrent HTTP connections per browser (around 6).

Custom Event Example

You can also define custom event types like this:

Server:

javascript
res.write(`event: customEvent\ndata: {"message": "This is a custom event"}\n\n`);

Client:

javascript
eventSource.addEventListener('customEvent', (event) => {
  console.log('Custom Event:', JSON.parse(event.data));
});

✅ Use Cases

Real-time notifications
Live sports scores
Chat applications (if one-way updates are sufficient)
Stock price updates
Live dashboards

1. How do you receive Server-Sent Event (SSE) notifications?

To receive SSE notifications, you create an instance of the EventSource class, which establishes a persistent connection to a server that sends events. Here's an example:

javascript
const eventSource = new EventSource('https://your-server.com/events');

eventSource.addEventListener('message', (event) => {
    console.log('Message:', event.data);
});

eventSource.addEventListener('open', () => {
    console.log('Connection opened');
});

eventSource.addEventListener('error', (error) => {
    console.error('Error:', error);
    eventSource.close(); // Optionally close on error
});

The server sends events in a specific format like this:

css
data: {"message": "Hello from the server!"}\n\n

2. How do you check browser support for server-sent events?

You can check if the browser supports SSE using the following code:

javascript
if (typeof EventSource !== 'undefined') {
    console.log('SSE is supported');
} else {
    console.log('SSE is not supported');
}

3. What are the events available for server-sent events?

The following events are available for EventSource:

Event	Description
open	Fired when the connection to the server is established.
message	Fired when a message is received from the server.
error	Fired when an error occurs or the connection closes unexpectedly.

You can also define custom event types on the server side by prefixing the event name with event::

csharp
event: customEvent
data: {"message": "This is a custom event"}\n\n

In JavaScript:

javascript
eventSource.addEventListener('customEvent', (event) => {
    console.log('Custom Event:', event.data);
});

This allows you to define and handle specific types of events beyond the standard message, open, and error events.

44. What are server-sent events?